<template>
  <div>
    <Modal
      v-model="modals"
      width="700"
      scrollable
      closable
      :title="titleFrom"
      :mask-closable="false"
      :z-index="1"
      @on-cancel="handleReset"
	  @on-confirm="handleSubmit"
      @on-visible-change="visible"
    >
      <Form ref="formValidate" :model="formValidate" :label-width="110" :rules="ruleValidate" @submit.native.prevent>
        <Row type="flex" :gutter="24">
			<Col v-bind="grid">
	            <FormItem label="商品名称" prop="name">
	              <div class="add">
	                <Input v-model="formValidate.name" placeholder="请输入商品名称"></Input>
	              </div>
	            </FormItem>
	        </Col>
           <Col v-bind="grid">
             <FormItem label="商品分类：" prop="cate_id">
				 <Select v-model="formValidate.cate_id" placeholder="请选择商品分类" element-id="cate_id" clearable>
				 	<Option v-for="(item, j) in cates" :value="item.value" :key="j">{{ item.label }} </Option>
				 </Select>
			 </FormItem>
           </Col>
           <Col v-bind="grid">
             <FormItem label="所属厂商：" prop="company_id">
				 <Select v-model="formValidate.company_id" placeholder="请选择所属厂商" element-id="company_id" clearable>
				 	<Option v-for="(item, j) in companys" :value="item.value" :key="j">{{ item.label }} </Option>
				 </Select>
			 </FormItem>
           </Col>
			<Col v-bind="grid">
			    <FormItem label="规格" prop="specs">
			      <div class="add">
			        <Input v-model="formValidate.specs" placeholder="请输入商品规格"></Input>
			      </div>
			    </FormItem>
			</Col>
			<Col v-bind="grid">
			    <FormItem label="价格" prop="price">
			      <div class="add">
			        <Input  type="number" v-model="formValidate.price" placeholder="请输入商品价格"></Input>
			      </div>
			    </FormItem>
			</Col>
			<Col v-bind="grid">
			    <FormItem label="库存" prop="old_num">
			      <div class="add">
			        <Input type="number" v-model="formValidate.old_num" placeholder="请输入商品库存"></Input>
			      </div>
			    </FormItem>
			</Col>
			<Col v-bind="grid">
			    <FormItem label="单位" prop="unit">
			      <div class="add">
			        <Input v-model="formValidate.unit" placeholder="请输入商品单位"></Input>
			      </div>
			    </FormItem>
			</Col>
			<Col v-bind="grid">
			    <FormItem label="批次编号" prop="no">
			      <div class="add">
			        <Input v-model="formValidate.no" placeholder="请输入商品批次编号"></Input>
			      </div>
			    </FormItem>
			</Col>
			<Col v-bind="grid">
			    <FormItem label="生产编号" prop="p_no">
			      <div class="add">
			        <Input v-model="formValidate.p_no" placeholder="请输入商品生产编号"></Input>
			      </div>
			    </FormItem>
			</Col>
			<Col v-bind="grid">
			    <FormItem label="有效期：" prop="expire_date">
			    	<DatePicker
			    	  class="form-sty"
			    	  type="datetime"
			    	  :value="formValidate.expire_date"
			    	  placeholder="请选择有效期"
			    	  style="width: 100%"
			    	  format="yyyy-MM-dd HH:mm"
			    	  @on-change="formValidate.expire_date = $event"
			    	></DatePicker>
			    </FormItem>
			</Col>
			
            <!-- <Col v-bind="grid" class="mr50">
              <FormItem label="商品图片：" prop="cover">
                <div class="picBox" @click="modalPicTap('单选')">
                  <div class="pictrue" v-if="formValidate.cover">
                    <img :src="formValidate.cover" />
                  </div>
                  <div class="upLoad acea-row row-center-wrapper" v-else>
                    <Icon type="ios-camera-outline" size="24" />
                  </div>
                </div>
                <div class="tip">建议尺寸：500 x 312 px</div>
              </FormItem>
            </Col> -->
          
        </Row>
      </Form>
	  <div slot="footer">
	    <Button @click="cancel()">取消</Button>
	    <Button type="primary" @click="handleSubmit()">保存</Button>
	  </div>
    </Modal>
	
	<Modal
	  v-model="modalPic"
	  width="950px"
	  scrollable
	  footer-hide
	  closable
	  title="上传商品图"
	  :mask-closable="false"
	  :z-index="888"
	>
	  <uploadPictures
	    :isChoice="isChoice"
	    @getPic="getPic"
	    :gridBtn="gridBtn"
	    :gridPic="gridPic"
	    v-if="modalPic"
	  ></uploadPictures>
	</Modal>
  </div>
</template>

<script>
import uploadPictures from '@/components/uploadPictures';
import { saveApi} from '@/api/platproduct';
import { ListCateApi} from '@/api/company';
import { ListProCateApi} from '@/api/platproductcate';
import icon from '@/utils/icon';
import { getCookies } from '@/libs/util';
export default {
  name: 'menusFrom',
  props: {
    formValidate: {
      type: Object,
      default: null,
    },
    titleFrom: {
      type: String,
      default: '',
    },
  },
  components: { uploadPictures },
  data() {
    return {
      arrs: [],
      searchRule: '',
      iconVal: '',
      grid: {
        xl: 12,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24,
      },
      modals: false,
      modal12: false,
      ruleValidate: {
		name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
      },
      valids: false,
      list: icon,
      authType: true,
      search: icon,
	  header: {},
      fileUrl: '/adminapi/file/upload_file/1',
	  files:[],
	  companys:[],//厂商
	  cates:[],//分类
      modalPic: false,
      isChoice: '单选',
      gridPic: {
        xl: 6,
        lg: 8,
        md: 12,
        sm: 12,
        xs: 12,
      },
      gridBtn: {
        xl: 4,
        lg: 8,
        md: 8,
        sm: 8,
        xs: 8,
      },
    };
  },
  watch: {
    'formValidate.header': function (n) {
      this.formValidate.is_header = n ? 1 : 0;
    },
    'formValidate.auth_type': function (n) {
      if (n === undefined) {
        n = 1;
      }
      this.authType = n === 1;
    },
    'formValidate.data': function (n) {},
  },
  computed: {
	  
  },
  methods: {
    // 选择图片
    modalPicTap() {
      this.modalPic = true;
    },
    // 选中图片
    getPic(pc) {
      this.formValidate.cover = pc.att_dir;
      this.modalPic = false;
    },
    init() {
      this.searchRule = '';
      this.arrs = [];
    },
	// 上传头部token
	getToken() {
	  this.header['Authori-zation'] = 'Bearer ' + getCookies('token');
	  console.info(this.header);
	},
    // 获取客户数据
    getAddFrom() {
		let that = this;
		
        ListCateApi()
        .then(async (res) => {
			that.companys = res.data;
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
		
        ListProCateApi({
			type:0
		})
        .then(async (res) => {
			that.cates = res.data;
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
		
		
        
    },
	cancel(){
		this.modals = false;
	},
    // 提交
    handleSubmit() {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          this.valids = true;
          saveApi(this.formValidate)
            .then(async (res) => {
              this.$Message.success(res.msg);
			  this.files = [];
              this.modals = false;
              this.$emit('getList');
              this.getAddFrom();
            })
            .catch((res) => {
              this.$Message.error(res.msg);
            });
        } else {
          
			if (!this.formValidate.name) return this.$Message.error('请输入名称！');
        }
      });
    },
    handleReset() {
      this.modals = false;
      this.authType = true;
      this.$refs['formValidate'].resetFields();
      this.$emit('clearFrom');
    },
  },
  created() {
    this.list = this.search;
    this.getToken();
    this.getAddFrom();
  },
};
</script>

<style scoped>

/deep/.ivu-form-item-content {
  line-height: unset !important;
}
.picBox {
  display: inline-block;
  cursor: pointer;
}

.form .goodsTitle {
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  margin-bottom: 25px;
}

.form .goodsTitle ~ .goodsTitle {
  margin-top: 20px;
}

.form .goodsTitle .title {
  border-bottom: 2px solid #1890ff;
  padding: 0 8px 12px 5px;
  color: #000;
  font-size: 14px;
}

.form .goodsTitle .icons {
  font-size: 15px;
  margin-right: 8px;
  color: #999;
}

.form .add {
  font-size: 12px;
  color: #1890ff;
  padding: 0 12px;
  cursor: pointer;
}

.form .radio {
  margin-right: 20px;
}

.form .submission {
  width: 10%;
  margin-left: 27px;
}

.form .upLoad {
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
}

.form .iconfont {
  color: #898989;
}

.form .pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 10px;
}

.form .pictrue img {
  width: 100%;
  height: 100%;
}

.Modals .address {
  width: 90%;
}

.Modals .address .iconfont {
  font-size: 20px;
}
.tip {
  margin-top: 10px;
  color: #bbb;
}
</style>
